<div id="navTop" th:fragment="navTop">
    <nav class="navbar navbar-default top-navbar" role="navigation" xmlns:th="http://www.thymeleaf.org"
    >
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/" style="padding:18px 15px;width:378px">
                <img src="../static/assets/img/logo.png" width="35px" style="float: left;"
                     th:src="@{/assets/img/logo.png}"/>
                <div style="float: left;width: 300px;margin-left: 12px">车辆GPS管理平台</div>
            </a>
            <div id="sideNav">
                <i class="fa fa-bars icon"></i>
                <script>
                    //初始默认加载的菜单等
                    //                $.ajax({
                    //                    type: 'GET',
                    //                    async: false,
                    //                    url: '/api/menus/browser/root',
                    //                    success: function (result) {
                    //                        if (result.success) {
                    //                            var html = '';
                    //                            for (var i = 0; i < result.data.length; i++) {
                    //                                html += "<li class=\"dropdown menuup\" id=" + result.data[i].menuId + ">";
                    //                                html += "<a class=\"dropdown-toggle\" aria-expanded=\"false\" href=\"javascript:void(0)\"  onclick=\"goToLayout('" + result.data[i].menuId + "')\">";
                    //                                html += "<i class=\"fa " + result.data[i].ico + "\"></i> <span>" + result.data[i].name + "</span>";
                    //                                html += "</a>";
                    //                                html += "</li>";
                    //                            }
                    //                            $('#index').after(html);
                    //
                    //                        }
                    //                    }
                    //                });


                    /**
                     * 获取当前登录人的信息
                     */
                    function getEmpInformation() {
                        $.ajax({
                            type: 'GET',
                            url: '/api/employees/me',
                            success: function (result) {
                                if (result.success) {
                                    $('#welcome').text(result.data.name + ' 欢迎您!');
                                    $('#updName').text(result.data.name);
                                    $('#updSex').text(result.data.sex);
                                    $('#updDuty').text(result.data.duty);
                                    $('#updMobilephone').val(result.data.mobilePhone);
                                    $('#updMail').val(result.data.email);
                                    $('#updTel').val(result.data.tel);
                                }
                            }
                        });
                    }


                    /**
                     * 修改个人信息
                     */
                    function updateInformation() {

                        var data = {
                            'mobilePhone': $('#updMobilephone').val(),
                            'email': $('#updMail').val(),
                            'tel': $('#updTel').val()
                        };

                        $.ajax({
                            type: 'PUT',
                            url: '/api/employees/information',
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            success: function (result) {
                                if (result.success) {
                                    Showbo.Msg.alert('修改成功');
                                    getEmpInformation();
                                    $('#myModal').modal('hide')
                                } else {
                                    Showbo.Msg.alert(result.message);
                                }
                            }

                        })

                    }

                    //                $(function () {
                    //                    getEmpInformation();
                    //                    var id = window.localStorage.getItem("id")
                    //                    if (id != null) {
                    //                        $('#' + id)[0].className = "dropdown menuup activetop";
                    //                        window.localStorage.clear("id")
                    //                        goToLayout(id);
                    //                    } else {
                    //                        $('#activeul').children()[0].className = "dropdown menuup activetop";
                    //                        goToLayout($('#activeul').children()[0].id);
                    //                    }
                    //                });

                    function goToLayout(parentMenuId) {

                        var id1 = []


                        if (parentMenuId !== undefined && parentMenuId !== null && parentMenuId !== '') {
                            $.ajax({
                                type: 'GET',
                                async: false,
                                url: '/api/menus/' + parentMenuId + '/children',
                                success: function (result) {
                                    console.log(result)
                                    if (result.success) {
                                        $('#main-menu').empty();
                                        var html = '';
                                        for (var i = 0; i < result.data.length; i++) {
                                            html += '<li class="">';
                                            if (result.data[i].children.length > 0) {
                                                html += '<a href="#"><i class="fa ' + result.data[i].ico + '"></i> ' + result.data[i].name + '<span style="font-family: FontAwesome!important;" class="fa arrow"></span></a>';
                                                if (result.data[i].children.length > 0) {
                                                    html += '<ul class="nav nav-second-level collapse">';
                                                    for (let j = 0; j < result.data[i].children.length; j++) {
                                                        html += '<li><a href="javascript:void(0);" onclick="goTo(\'' + result.data[i].children[j].path + '\')">' + result.data[i].children[j].name + '</a></li>';
                                                    }
                                                    html += '</ul>';
                                                }
                                            } else {
                                                html += '<a href="javascript:void(0);" onclick="goTo(\'' + result.data[i].path + '\')" id=\'' + result.data[i].path + '\'><i class="fa ' + result.data[i].ico + '"></i> ' + result.data[i].name + '</a>';
                                            }
                                            html += '</li>';
                                        }
                                        $('#main-menu').metisMenu('dispose');
                                        $('#main-menu').prepend(html);
                                        $('#main-menu').metisMenu();
                                    }

                                }
                            });
                            if ($("#main-menu").children()[0] === undefined) {
                                goTo('/index');
                            } else {
                                goTo($("#main-menu").children()[0].children[0].id);
                            }
                        }
                        $.each($('#activeul').children(), function (index, item) {
                            id1.push(item.id)
                            if (item.id != "") item.className = "dropdown menuup"
                        })
                        if (id1.indexOf(parentMenuId) != "-1") {
                            $('#' + parentMenuId)[0].className = "dropdown menuup activetop";
                        } else {
                            $('#activeul').children()[0].className = "dropdown menuup activetop";
                        }
                    }


                    var clearTIMER;
                    //个人信息的初始加载
                    //                $(function () {
                    //                    getMessage()
                    //                    clearInterval(clearTIMER);
                    //                    clearTIMER = setInterval(function () {
                    //                        getMessage()
                    //                    }, 300000)
                    //                });

                    function gotoMessage() {
                        goToLayout("m1003")
                        goTo('/message')
                    }
                    function getMessage() {
                        $.ajax({
                            type: 'POST',
                            url: '/api/message/findMessageListForIndex/',
                            success: function (result) {
                                $("#msgBox").empty();
                                if (result.totalCount == 0 || result.totalCount == null || result.totalCount == "") {
                                    $("#messageCount").css("display", "none");
                                } else {
                                    $("#messageCount").css("display", "block");
                                    $("#messageCount").html(result.totalCount);
                                }

                                var data = result.messageListForIndex;
                                var strhtml = "";
                                strhtml += "<li class='arrowhead'></li>";
                                strhtml += "<li class='nav_bg'></li>";
                                for (var i = 0; i < data.length; i++) {
                                    strhtml += "<li>";
                                    strhtml += "<a href='#' onclick='gotoMessage()'>";
                                    strhtml += "<div class='texthover' style='padding-top: 5px;color: #566374'>";
                                    strhtml += "<span>";
                                    strhtml += "<i style='color: #fff;line-height: 18px;width: 20px' class='cstx fa fa-bell-o fa-fw'></i><i style='color: #fff;line-height: 18px;width: 20px' class='xxtz fa fa-bullhorn fa-fw'></i>" + data[i].title;
                                    strhtml += "</span>";
                                    strhtml += "<span style='color: #aaa' class='pull-right text-muted small'>" + timeago(data[i].cdate) + "</span>";
                                    strhtml += "</div>";
                                    strhtml += "</a>";
                                    strhtml += "</li>";
                                    strhtml += "<li class='divider' ></li>";
                                }

                                strhtml += "<li>";
                                strhtml += "<a class='text-center' style='color: #aaaaaa' href='#' onclick=\"goTo('/message')\">";
                                strhtml += "<strong style='color: #aaaaaa'>查看未读消息</strong>";
                                strhtml += "<i class='fa fa-angle-right' style='color: #aaaaaa'></i>";
                                strhtml += "</a>";
                                strhtml += "</li>";

                                $("#msgBox").html(strhtml);
                            }
                        });
                    }


                    //计算时间js
                    function timeago(dateTimeStr) {  //时间字符串   2019-04-17 10:10:08.0
                        //字符串转时间戳
                        ////dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
                        dateTimeStr = dateTimeStr.substring(0, 19);
                        dateTimeStr = dateTimeStr.replace(/-/g, '/');
                        var dateTimeStamp = new Date(dateTimeStr).getTime();

                        var minute = 1000 * 60;      //把分，时，天，周，半个月，一个月用毫秒表示
                        var hour = minute * 60;
                        var day = hour * 24;
                        var week = day * 7;
                        var halfamonth = day * 15;
                        var month = day * 30;
                        var now = new Date().getTime();   //获取当前时间毫秒
                        var diffValue = now - dateTimeStamp;//时间差

                        if (diffValue < 0) {
                            return;
                        }
                        var minC = diffValue / minute;  //计算时间差的分，时，天，周，月
                        var hourC = diffValue / hour;
                        var dayC = diffValue / day;
                        var weekC = diffValue / week;
                        var monthC = diffValue / month;
                        if (monthC >= 1 && monthC <= 3) {
                            result = " " + parseInt(monthC) + "月前"
                        } else if (weekC >= 1 && weekC <= 3) {
                            result = " " + parseInt(weekC) + "周前"
                        } else if (dayC >= 1 && dayC <= 6) {
                            result = " " + parseInt(dayC) + "天前"
                        } else if (hourC >= 1 && hourC <= 23) {
                            result = " " + parseInt(hourC) + "小时前"
                        } else if (minC >= 1 && minC <= 59) {
                            result = " " + parseInt(minC) + "分钟前"
                        } else if (diffValue >= 0 && diffValue <= minute) {
                            result = "刚刚"
                        } else {
                            var datetime = new Date();
                            datetime.setTime(dateTimeStamp);
                            var Nyear = datetime.getFullYear();
                            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
                            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
                            var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
                            var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
                            var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
                            result = Nyear + "-" + Nmonth + "-" + Ndate
                        }
                        return result;
                    }


                    function logout() {
                        clearToken();
                        window.location.href = '/login';
                    }
                </script>
            </div>
        </div>
        <ul id="activeul" class="nav navbar-top-links navbar-right list">
            <li class="dropdown menuup" id="index">
                <a class="dropdown-toggle" aria-expanded="false" href="/index" >
                    <i class="fa fa-dashboard"></i> <span>首页</span>
                </a>
            </li>
            <li class="dropdown menuup ">
                <a class="dropdown-toggle" aria-expanded="false" href="/demo/index/1">
                    <i class="fa fa-envelope fa-fw" class="fa fa-mercury"></i> <span>测试demo</span>
                </a>
            </li>
            <li class="dropdown">
                <div class="news" id="messageCount">0</div>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts" id="msgBox">
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#" style="color: #aaa" onclick="JumpTo('/message/shortMessage/')">
                            <strong>查看未读消息</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <li style="color: #fff;
    border-radius: 70px;
    min-width: 50px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #30a5ffd9;
    padding: 0 9px">
                <span></span>
                <!--<li class="dropdown">-->
                <!--<a class="dropdown-toggle menuname" style="padding: 20px 0"-->
                <!--sec:authentication="principal.name"></a>-->
                <!--</li>-->
                <span id="welcome"></span>
            </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <style>
                    .message:hover {
                        background-color: #1ebfae;
                        color: #ffffff;
                    }

                    .editPassword:hover {
                        background-color: #1ebfae;
                        color: #ffffff;
                    }

                    .address:hover {
                        background-color: #1ebfae;
                        color: #ffffff;
                    }

                    .logout:hover {
                        background-color: #1ebfae;
                        color: #ffffff;
                    }
                </style>

                <div class="dropdown-menu dropdown-user" style="min-width: 353px;margin-right: 16px;padding: 0">
                    <div class="row" style="margin-right: 0;margin-left: 0;">
                        <div class="col-md-4 message"
                             style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                             data-toggle="modal" data-target="#myModal">
                            <i class="fa fa-address-card-o"
                               style="padding-top: 5px;display: block;height: 20px;line-height: 20px"></i>
                            <span style="display: block;height: 30px;line-height: 30px">个人信息</span>
                        </div>
                        <div class="col-md-4 editPassword"
                             style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                             data-toggle="modal" data-target="#myModall">
                            <i class="fa fa-key" style="display: block;height: 20px;line-height: 20px"></i>
                            <span style="display: block;height: 30px;line-height: 30px"> 修改密码</span>
                        </div>
                        <div class="col-md-4 address"
                             style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                             onclick="JumpTo('/addressList/toShow/')">
                            <i class="fa  fa-address-book-o" style="display: block;height: 20px;line-height: 20px"></i>
                            <span style="display: block;height: 30px;line-height: 30px"> 通讯录</span>
                        </div>
                        <div class="col-md-12 logout"
                             style="padding-top: 5px;text-align: center;height: 50px;cursor: pointer"
                             onclick="logout()">
                            <i class="fa fa-sign-out" style="display: block;height: 20px;line-height: 20px"></i>
                            <span style="display: block;height: 30px;line-height: 30px"> 退出</span>
                        </div>
                    </div>
                </div>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->

        </ul>

    </nav>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">个人信息修改</h4>
                </div>
                <div class="modal-body" style="min-height: 320px">
                    <form class="form-horizontal" action="" id="defaultForm">
                        <div class="form-group col-md-12">
                            <label class="control-label col-md-3"
                                   style=" line-height: 34px; text-align: right;padding: 0">
                                姓名：</label>
                            <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                <p class="form-control" id="updName"></p>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label col-md-3"
                                   style=" line-height: 34px; text-align: right;padding: 0">
                                性别：</label>
                            <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                <p class="form-control" id="updSex"></p>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label col-md-3"
                                   style=" line-height: 34px; text-align: right;padding: 0">
                                职务：</label>
                            <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                <p class="form-control" id="updDuty"></p>
                            </div>
                        </div>
                        <div id="editMessage" style="display: block">
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    移动电话：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <input type="text" class="form-control" id="updMobilephone">
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    邮箱：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <input type="text" class="form-control" id="updMail">
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label class="control-label col-md-3"
                                       style=" line-height: 34px; text-align: right;padding: 0">
                                    办公电话：</label>
                                <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                    <input type="text" class="form-control" id="updTel">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default" id="edit" style="display: inline-block"
                            onclick="updateInformation()">保存
                    </button>
                </div>


            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" id="myModall" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">密码修改</h4>
                </div>
                <div class="modal-body" style="min-height: 227px">
                    <form class="form-horizontal" id="updatePasswordForm">
                        <div class="form-group col-md-12">
                            <label class="control-label col-md-3"
                                   style=" line-height: 34px; text-align: right;padding: 0">
                                原密码：</label>
                            <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                <input style="width: 100%" type="password" class="form-control" name="oldPassword"
                                       id="oldPassword"/>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label col-md-3"
                                   style=" line-height: 34px; text-align: right;padding: 0">
                                新密码：</label>
                            <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                <input style="width: 100%" type="password" class="form-control" name="newPassword"
                                       id="newPassword"/>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="control-label col-md-3"
                                   style=" line-height: 34px; text-align: right;padding: 0">
                                确认密码：</label>
                            <div class="col-md-9 col-sm-1 col-xs-1" style="margin: 0; padding: 0;">
                                <input style="width: 100%" type="password" class="form-control" name="configPassword"
                                       id="configPassword"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="updPassWord" class="btn btn-default" onclick="updatePassword()"><i
                            class="fa fa-check"></i>保存
                    </button>
                </div>


            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script>
        function updatePassword() {
            var serializeJSON = $('#updatePasswordForm').serializeJSON();
            $.ajax({
                type: 'PUT',
                url: '/api/password/update',
                data: JSON.stringify(serializeJSON),
                contentType: "application/json",
                success: function (result) {
                    if (result.success) {
                        Showbo.Msg.alert('修改成功');
                        $('#myModall').modal('hide');
                        document.getElementById('updatePasswordForm').reset();
                    } else {
                        Showbo.Msg.alert(result.message);
                    }
                }

            })

        }

    </script>
</div>